<form class="layui-form" action="" lay-filter="component-form-createvideo">
    <script type="text/html" template lay-url="{{ layui.setter.baseUrl }}sale/aliaddvideo"
            lay-done="layui.form.render(null, 'component-form-createvideo');">
        <div class="layui-form-item">
            <label class="layui-form-label">视频标题</label>
            <div class="layui-input-block">
                <input type="text" id="media_video-title" name="data[title]" value="" lay-verify="required"
                       autocomplete="on" placeholder="请输入视频标题" class="layui-input">
                <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">视频数量，根据素材上传自动计算！
                </blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频宽度</label>
            <div class="layui-input-block">
                <input type="number" name="data[width]" value="720" lay-verify="required" autocomplete="on"
                       placeholder="请输入视频宽度" class="layui-input">
                <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">推荐使用720！</blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频高度</label>
            <div class="layui-input-block">
                <input type="number" name="data[height]" value="1280" lay-verify="required" autocomplete="on"
                       placeholder="请输入视频高度" class="layui-input">
                <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">推荐使用1280！</blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频时长范围(单位:秒)</label>
            <div class="layui-input-inline">
                <input type="number" name="data[min]" value="20" lay-verify="required" autocomplete="on"
                       placeholder="请输入视频时长范围" class="layui-input">
            </div>
            <span style="float:left;">&nbsp;~&nbsp;&nbsp;</span>
            <div class="layui-input-inline">
                <input type="number" name="data[max]" value="30" lay-verify="required" autocomplete="on"
                       placeholder="请输入视频时长范围" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频头部素材：</label>
            <div class="layui-form-item" id="mediaformview3"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频正片素材：</label>
            <div class="layui-form-item" id="mediaformview"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频尾部素材：</label>
            <div class="layui-form-item" id="mediaformview2"></div>
        </div>
        <input type="hidden" id="media-upload" data-uploadurl="{{ d.data.mediauploadurl }}"
               data-cdnurl="{{ d.data.cdnurl }}">
        <input type="hidden" id="media-upload2" data-uploadurl="{{ d.data.mediauploadurl }}"
               data-cdnurl="{{ d.data.cdnurl }}">
        <input type="hidden" id="media-upload3" data-uploadurl="{{ d.data.mediauploadurl }}"
               data-cdnurl="{{ d.data.cdnurl }}">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <input type="hidden" id="token" name="data[token]" value="{{ d.data.token }}">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-createvideo" name="submit">生成视频
                    </button>
                </div>
            </div>
        </div>
    </script>
</form>


<script id="mediaform3" type="text/html">
    {{# for(let i=0; i
    <d.length; i++){ }}
    <label class="layui-form-label">片头素材{{i+1}}</label>
    <div class="layui-input-block">
        <div class="layui-input-inline">
            <input id="media-upload3-{{i}}" type="text" name="data[video][head][{{i}}][path]" value="{{d[i].path}}"
                   placeholder="请上传素材" class="layui-input" disabled>
        </div>
        <button type="button" class="layui-btn" style="float:left" onclick="layui.addmedia3({{i}})">上传片头素材</button>
        <a href="{{d[i].path}}" id="media-upload3-a-{{i}}" target="_blank" class="layui-btn layui-btn-normal"
           style="float:left;{{ d[i].path?'':'display:none;' }}">查看片头素材</a>
        <a href="javascript:;" class="layui-btn layui-btn-danger" onclick="layui.delmediaform3({{i}})"
           style="float:left">删除</a>
        <div style="clear:both;height:5px"></div>
    </div>
    {{# } }}
    <div class="layui-input-block">
        <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">
            可上传素材类型：图片(jpg、png)、视频(mp4)、音频(mp3)，视频素材最多5个，且总时长不超过3分钟。图像素材最多10个。音频素材最多1个。
        </blockquote>
    </div>
    <div class="layui-input-block">
        <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="layui.addmediaform3()">添加素材</a>
    </div>
</script>


<script id="mediaform2" type="text/html">
    {{# for(let i=0; i
    <d.length; i++){ }}
    <label class="layui-form-label">片尾素材{{i+1}}</label>
    <div class="layui-input-block">
        <div class="layui-input-inline">
            <input id="media-upload2-{{i}}" type="text" name="data[video][tail][{{i}}][path]" value="{{d[i].path}}"
                   placeholder="请上传素材" class="layui-input" disabled>
        </div>
        <button type="button" class="layui-btn" style="float:left" onclick="layui.addmedia2({{i}})">上传片尾素材</button>
        <a href="{{d[i].path}}" id="media-upload2-a-{{i}}" target="_blank" class="layui-btn layui-btn-normal"
           style="float:left;{{ d[i].path?'':'display:none;' }}">查看片尾素材</a>
        <a href="javascript:;" class="layui-btn layui-btn-danger" onclick="layui.delmediaform2({{i}})"
           style="float:left">删除</a>
        <div style="clear:both;height:5px"></div>
    </div>
    {{# } }}
    <div class="layui-input-block">
        <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">
            可上传素材类型：图片(jpg、png)、视频(mp4)、音频(mp3)，视频素材最多5个，且总时长不超过3分钟。图像素材最多10个。音频素材最多1个。
        </blockquote>
    </div>
    <div class="layui-input-block">
        <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="layui.addmediaform2()">添加素材</a>
    </div>
</script>

<script id="mediaform" type="text/html">
    {{# for(let i=0; i
    <d.length; i++){ }}
    <label class="layui-form-label">正片素材{{i+1}}</label>
    <div class="layui-input-block">
        <div class="layui-input-inline">
            <input id="media-upload-{{i}}" type="text" name="data[video][list][{{i}}][path]" value="{{d[i].path}}"
                   placeholder="请上传素材" class="layui-input" disabled>
        </div>
        <button type="button" class="layui-btn" style="float:left" onclick="layui.addmedia({{i}})">上传正片素材</button>
        <a href="{{d[i].path}}" id="media-upload-a-{{i}}" target="_blank" class="layui-btn layui-btn-normal"
           style="float:left;{{ d[i].path?'':'display:none;' }}">查看正片素材</a>
        <a href="javascript:;" class="layui-btn layui-btn-danger" onclick="layui.delmediaform({{i}})"
           style="float:left">删除</a>
        <div style="clear:both;height:5px"></div>
    </div>
    {{# } }}
    <div class="layui-input-block">
        <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FF5722;">
            可上传素材类型：图片(jpg、png)、视频(mp4)、音频(mp3)，视频素材最多5个，且总时长不超过3分钟。图像素材最多10个。音频素材最多1个。
        </blockquote>
    </div>
    <div class="layui-input-block">
        <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="layui.addmediaform()">添加素材</a>
    </div>
</script>
<script>
    layui.use(['admin', 'form', 'upload', 'laytpl'], function (data) {
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , form = layui.form
            , upload = layui.upload
            , laytpl = layui.laytpl;

        if (!layui.mediaform) {
            layui.mediaform = [
                {
                    path: ''
                }
            ];
            layui.mediaidx = 0;
        }
        if (!layui.mediaform2) {
            layui.mediaform2 = [
                {
                    path: ''
                }
            ];
            layui.mediaidx2 = 0;
        }

        if (!layui.mediaform3) {
            layui.mediaform3 = [
                {
                    path: ''
                }
            ];
            layui.mediaidx3 = 0;
        }

        layui.addmediaform = function () {
            layui.mediaform.push({
                path: ''
            });
            laytpl($('#mediaform').html()).render(layui.mediaform, function (html) {
                $('#mediaformview').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }

        layui.addmediaform2 = function () {
            layui.mediaform2.push({
                path: ''
            });

            laytpl($('#mediaform2').html()).render(layui.mediaform2, function (html) {
                $('#mediaformview2').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }

        layui.addmediaform3 = function () {
            layui.mediaform3.push({
                path: ''
            });

            laytpl($('#mediaform3').html()).render(layui.mediaform3, function (html) {
                $('#mediaformview3').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }

        layui.delmediaform3 = function (i) {
            layui.mediaform3.splice(i, 1);
            laytpl($('#mediaform3').html()).render(layui.mediaform3, function (html) {
                $('#mediaformview3').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }

        layui.delmediaform2 = function (i) {
            layui.mediaform2.splice(i, 1);
            laytpl($('#mediaform2').html()).render(layui.mediaform2, function (html) {
                $('#mediaformview2').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }

        layui.delmediaform = function (i) {
            layui.mediaform.splice(i, 1);
            laytpl($('#mediaform').html()).render(layui.mediaform, function (html) {
                $('#mediaformview').html(html);
                layui.form.render(null, 'component-form-createvideo');
            });
        }
        layui.addmedia = function (i) {
            layui.mediaidx = i;
            $('#media-upload').click();
            return false;
        }

        layui.addmedia2 = function (i) {
            layui.mediaidx2 = i;
            $('#media-upload2').click();
            return false;
        }

        layui.addmedia3 = function (i) {
            layui.mediaidx3 = i;
            $('#media-upload3').click();
            return false;
        }

        var siv = setInterval(function () {
            if ($('#media_video-title').length > 0) {
                upload.render({
                    elem: '#media-upload'
                    , url: $('#media-upload').data('uploadurl')
                    , accept: 'file' //普通文件
                    , done: function (res) {
                        if (res.code > 0) {
                            if (res.msg != '') {
                                return layer.msg(res.msg);
                            } else {
                                return layer.msg('上传失败');
                            }
                        }
                        $('#media-upload-' + layui.mediaidx).val($('#media-upload').data('cdnurl') + '/' + res.data.key);
                        $('#media-upload-a-' + layui.mediaidx).attr('href', $('#media-upload').data('cdnurl') + '/' + res.data.key).show();
                        layui.mediaform[layui.mediaidx].path = $('#media-upload').data('cdnurl') + '/' + res.data.key;
                        layer.msg('上传成功');
                    }
                });

                upload.render({
                    elem: '#media-upload2'
                    , url: $('#media-upload2').data('uploadurl')
                    , accept: 'file' //普通文件
                    , done: function (res) {
                        if (res.code > 0) {
                            if (res.msg != '') {
                                return layer.msg(res.msg);
                            } else {
                                return layer.msg('上传失败');
                            }
                        }
                        $('#media-upload2-' + layui.mediaidx2).val($('#media-upload2').data('cdnurl') + '/' + res.data.key);
                        $('#media-upload2-a-' + layui.mediaidx2).attr('href', $('#media-upload2').data('cdnurl') + '/' + res.data.key).show();
                        layui.mediaform2[layui.mediaidx2].path = $('#media-upload2').data('cdnurl') + '/' + res.data.key;
                        layer.msg('上传成功');
                    }
                });

                upload.render({
                    elem: '#media-upload3'
                    , url: $('#media-upload3').data('uploadurl')
                    , accept: 'file' //普通文件
                    , done: function (res) {
                        if (res.code > 0) {
                            if (res.msg != '') {
                                return layer.msg(res.msg);
                            } else {
                                return layer.msg('上传失败');
                            }
                        }
                        $('#media-upload3-' + layui.mediaidx3).val($('#media-upload3').data('cdnurl') + '/' + res.data.key);
                        $('#media-upload3-a-' + layui.mediaidx3).attr('href', $('#media-upload3').data('cdnurl') + '/' + res.data.key).show();
                        layui.mediaform3[layui.mediaidx3].path = $('#media-upload3').data('cdnurl') + '/' + res.data.key;
                        layer.msg('上传成功');
                    }
                });

                laytpl($('#mediaform').html()).render(layui.mediaform, function (html) {
                    $('#mediaformview').html(html);
                    layui.form.render(null, 'component-form-createvideo');
                });

                laytpl($('#mediaform2').html()).render(layui.mediaform2, function (html) {
                    $('#mediaformview2').html(html);
                    layui.form.render(null, 'component-form-createvideo');
                });

                laytpl($('#mediaform3').html()).render(layui.mediaform3, function (html) {
                    $('#mediaformview3').html(html);
                    layui.form.render(null, 'component-form-createvideo');
                });

                layer.closeAll('loading'); //关闭loading
                clearInterval(siv);
            }
        }, 200);

        /* 监听提交 */
        form.on('submit(component-form-createvideo)', function (data) {
            console.log(data.field);
            // return false;
            if (data.field['data[num]'] > 20) {
                layer.msg('最多只能生成20个视频！');
                return false;
            }
            layui.alivideo = {
                'title': data.field['data[title]'],
                'num': data.field['data[num]'],
                'width': data.field['data[width]'],
                'height': data.field['data[height]'],
                'min': data.field['data[min]'],
                'max': data.field['data[max]'],
                'video_all': {"head":layui.mediaform3,"list":layui.mediaform,"tail":layui.mediaform2},
            };
            $('#LAY-popup-video-add').nextAll('.layui-icon').click();
            laytpl($('#videoform').html()).render(layui.videoform, function (html) {
                $('#videoformview').html(html);
                layui.form.render(null, 'component-form-editsale');
            });
            // laytpl($('#videoform2').html()).render(layui.videoform2, function (html) {
            //     $('#videoformview2').html(html);
            //     layui.form.render(null, 'component-form-editsale');
            // });
            return false;
        });
    });
</script>